<template>
  <div class="recommend">
    <!-- 走马灯 -->
    <div class="swiper">
      <el-carousel :interval="3000" trigger="click" type="card" height="240px">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.imageUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐歌单 -->
    <div class="rc-song-list w">
      <h3>
        <span class="title">推荐歌单</span
        ><span class="more">更多<i class="iconfont icon-right_5"></i></span>
      </h3>
      <div class="content clearfix">
        <div class="content-left">
          <div class="title">神马音乐</div>
          <div class="item-gd">
            <span>专属推荐歌单</span>
            <div class="mask-login">
              <img src="../../assets/images/专属推荐.jpg" alt="" />
              <div class="icon-login"></div>
            </div>
            <div class="desc">开启你的音乐之旅</div>
          </div>
        </div>
        <div class="content-right">
          <div class="item" v-for="(item, index) in rcSongList" :key="index">
            <div class="img-wrap">
              <el-image :src="item.picUrl">
                <template slot="placeholder">
                  <img
                    class="palceholder-img"
                    src="../../assets/images/timg.jpg"
                    alt=""
                  />
                </template>
              </el-image>
              <span class="playlist-play">
                <img src="../../assets/images/btn-play.png" alt="" />
              </span>
              <span class="play-count"
                ><i class="iconfont icon-play1"></i>
                {{ item.playCount | filterPlayCount }}
              </span>
            </div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新歌速递 -->
    <div class="new-song">
      <div class="title-wrapper w">
        <span>新歌速递</span>
      </div>
      <div class="back-wrapper">
        <div class="wrapper-contain clearfix w">
          <div class="wrapper-left">
            <div class="static-img-box">
              <div
                class="static-wrap"
                v-for="(item, index) in staticImgs"
                :key="index"
              >
                <el-image class="img-item" :src="item.picUrl">
                  <template slot="placeholder" class="image-slot">
                    <img
                      class="static-placeholder"
                      src="../../assets/images/timg.jpg"
                      alt=""
                    />
                  </template>
                </el-image>
              </div>
            </div>
          </div>
          <div class="wrapper-right">
            <div
              class="song-item"
              v-for="(item, index) in newSongList"
              :key="index"
            >
              <div class="back-wrap">
                <div class="item-cover" @click="playStart(item)">
                  <el-image class="cover" :src="item.picUrl">
                    <template slot="placeholder" class="image-slot">
                      <img src="../../assets/images/timg.jpg" />
                    </template>
                  </el-image>
                  <span class="newsong-play">
                    <img src="../../assets/images/btn-play.png" alt="" />
                  </span>
                </div>
                <div class="item-info">
                  <p class="song-name overflow2">
                    {{ item.name }}
                  </p>
                  <p class="singer">{{ item.song.artists }}</p>
                  <p class="duration">
                    {{ item.song.duration | filterPlayTime }}
                  </p>
                </div>
                <div class="item-action"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门歌手 -->
    <div class="hot-singer">
      <h2 class="singer-title">
        <div class="title-left">推荐歌手</div>
        <div class="title-right">更多<i class="iconfont icon-right_5"></i></div>
      </h2>
      <ul class="singer-list clearfix">
        <li v-for="(item, index) in hotSingerList" :key="index">
          <div class="cover">
            <el-image :src="item.picUrl">
              <template slot="placeholder" class="image-slot">
                <img src="../../assets/images/timg.jpg" alt="" /> </template
            ></el-image>
          </div>
          <div class="info">
            <p class="name overflow2">{{ item.name }}</p>
            <p class="muisc-size">单曲数量{{ item.musicSize }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {
  getBanner,
  getRecommendSongList,
  getNewSongList,
  getHotSinger
} from '@/api/recommend'
export default {
  name: 'recommend',
  data () {
    return {
      bannerList: [],
      rcSongList: [],
      newSongList: [],
      // newSong部分静态图
      staticImgs: [],
      hotSingerList: []
      // loading
    }
  },
  methods: {
    // 播放音乐
    playStart (item) {
      this.$setSongId(item.id)
    }
  },
  created () {
    getBanner().then(res => {
      this.bannerList = res.banners
    })
    // 推荐歌单
    getRecommendSongList({ limit: 12 }).then(res => {
      this.rcSongList = res.result
    })
    // 推荐新歌
    getNewSongList().then(res => {
      const _songList = res.result
      _songList.forEach(item => {
        item.song.artists = item.song.artists
          .map(item2 => {
            return item2.name
          })
          .join(' / ')
      })
      this.staticImgs = _songList.slice(0, 6)
      this.newSongList = _songList.slice(0, 8)
    })
    // 热门歌手
    getHotSinger({ limit: 30 }).then(res => {
      this.hotSingerList = res.artists
    })
  }
}
</script>
<style lang="less" scoped>
.recommend {
  // 走马灯
  .swiper {
    margin-top: 28px;
    .el-carousel {
      margin: 0 auto;
      width: 1350px;

      .el-carousel__item--card {
        border-radius: 8px;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
  // 推荐歌单
  .rc-song-list {
    .content {
      .content-left {
        position: relative;
        float: left;
        width: 270px;
        height: 400px;
        border-radius: 8px;
        background-image: radial-gradient(#4589cd, #3154a5);
        .title {
          margin-top: 20px;
          text-align: center;
          letter-spacing: 8px;
          font-size: 20px;
          color: #fff;
        }
        .item-gd {
          cursor: pointer;
          position: absolute;
          top: 97.5px;
          left: 50%;
          margin-left: -102.5px;
          width: 205px;
          height: 205px;
          .mask-login {
            width: 100%;
            height: 100%;
            img {
              border-radius: 8px;
              display: block;
              overflow: hidden;
              width: 100%;
              height: 100%;
              box-shadow: 10px 10px 1px 2px #8da1cd;
            }
            .icon-login {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: url('../../assets/images/n-login.png') no-repeat;
              background-size: contain;
            }
          }
          span {
            display: block;
            position: absolute;
            width: 147px;
            height: 32px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            color: #fff;
            background-color: #fe5987;
            top: -17px;
            left: 0;
            z-index: 1;
            border-radius: 4px 0 10px 4px;
            &::before {
              content: '';
              width: 0;
              height: 0;
              border-color: transparent transparent #c31043 #c31043;
              border-width: 9px 6px 8px 7px;
              border-style: solid;
              position: absolute;
              top: 0;
              left: 147px;
            }
          }
          .desc {
            font-size: 14px;
            text-align: center;
            margin-top: 20px;
            color: #fff;
          }
        }
      }
      .content-right {
        width: 1080px;
        float: right;
        display: flex;
        flex-wrap: wrap;
        .item {
          cursor: pointer;
          margin-left: 30px;
          width: 150px;
          height: 190px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &:nth-child(-n + 5) {
            margin-bottom: 20px;
          }
          .img-wrap {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            .play-count {
              position: absolute;
              padding: 0 10px;
              top: 5px;
              right: 5px;
              height: 20px;
              line-height: 20px;
              background-color: rgba(0, 0, 0, 0.3);
              font-size: 12px;
              text-align: center;
              border-radius: 12.5px;
              color: #fff;
              .icon-play1 {
                font-size: 12px;
                padding-right: 4px;
              }
            }
            &:hover .playlist-play img {
              opacity: 1;
            }
            .playlist-play {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-left: -32px;
              margin-top: -32px;
              width: 64px;
              height: 64px;
              border-radius: 50%;
              display: block;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                opacity: 0;
                transition: opacity 0.6s;
                &:hover {
                  animation: playan 2s ease;
                }
              }
            }

            > .el-image {
              width: 100%;
              height: 150px;
              display: block;
              border-radius: 8px;
              .palceholder-img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .name {
            box-sizing: border-box;
            font-size: 14px;
            color: #666666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    h3 {
      height: 32px;
      .title {
        font-size: 24px;
        float: left;
      }
      .more {
        cursor: pointer;
        margin-top: 6px;
        float: right;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        .icon-right_5 {
          margin-left: 5px;
          font-size: 14px;
        }
        &:hover {
          color: #000;
        }
      }
    }
  }
  // 新歌速递
  .new-song {
    margin-top: 40px;
    .title-wrapper {
      padding-left: 405px;
      height: 55px;
      line-height: 55px;
      span {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 4px;
      }
    }
    .back-wrapper {
      background-color: #f2f2f2;
      .wrapper-contain {
        position: relative;
        .wrapper-left {
          position: absolute;
          top: -55px;
          left: 0;
          width: 335px;
          height: 495px;
          padding: 7px;
          background-image: linear-gradient(to bottom, #febcce, #bc81ff);

          .static-img-box {
            position: relative;
            box-sizing: border-box;
            height: 100%;
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.4);
            }
            .static-wrap {
              width: 50%;
              height: 33.333%;
              float: left;
              .img-item {
                width: 100%;
                height: 100%;
                .static-placeholder {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
        .wrapper-right {
          margin-left: 385px;
          height: 411px;
          width: 965px;
          padding: 23px 0 8px;
          .song-item {
            position: relative;
            width: 50%;
            padding: 0 22px;
            margin-bottom: 15px;
            height: 80px;
            float: left;
            .back-wrap {
              height: 100%;
              border-radius: 8px;
              &:hover {
                background-color: rgba(0, 0, 0, 0.05);
                .cover {
                  transform: scale(1.1);
                }
              }
              &:hover .item-cover .newsong-play {
                opacity: 1;
              }
              .item-cover {
                position: relative;
                cursor: pointer;
                width: 80px;
                height: 80px;
                border-radius: 8px;
                margin-right: 30px;
                overflow: hidden;
                float: left;
                > .cover {
                  width: 100%;
                  height: 100%;
                  display: block;
                  transition: transform 0.5s;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .newsong-play {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  margin-top: -20px;
                  margin-left: -20px;
                  right: 0;
                  bottom: 0;
                  width: 40px;
                  height: 40px;
                  opacity: 0;
                  transition: all 0.5s;
                  border-radius: 50%;
                  &:hover {
                    animation: playan 2s ease;
                  }
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
              .item-info {
                float: left;
                p {
                  margin: 0;
                  box-sizing: border-box;
                  font-size: 14px;
                  &.song-name:hover,
                  &.singer:hover {
                    cursor: pointer;
                    color: @main-font-color;
                  }
                  &.song-name {
                    margin-top: 15px;
                    color: #000;
                    width: 200px;
                  }
                  &.singer {
                    margin-top: 15px;
                    color: #b39eb3;
                  }
                  &.duration {
                    color: #b39eb3;
                    height: 80px;
                    line-height: 80px;
                    position: absolute;
                    top: 0;
                    right: 40px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  // 热门歌手
  .hot-singer {
    width: 1380px;
    margin: 60px auto 0;
    .singer-title {
      height: 32px;
      padding: 0 15px;
      .title-left {
        float: left;
        font-size: 24px;
        font-weight: 600;
      }
      .title-right {
        cursor: pointer;
        margin-top: 6px;
        float: right;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        &:hover {
          color: #000;
        }
        .iconfont {
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }
    .singer-list {
      width: 100%;
      li {
        width: 10%;
        text-align: center;
        padding: 0 15px 30px;
        float: left;
        .cover {
          width: 100%;
          height: 105px;
          border-radius: 8px;
          overflow: hidden;
          .el-image {
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: block;
            transition: transform 0.6s;
            &:hover {
              transform: scale(1.1);
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .info {
          margin-top: 15px;
          p {
            margin: 0;
            &.name {
              cursor: pointer;
              font-size: 14px;
              font-weight: 600;
              color: #4a4a4a;
            }
            &.muisc-size {
              margin-top: 10px;
              font-size: 12px;
              color: @main-font-color;
            }
          }
        }
      }
    }
  }
}
</style>
